<template>
    <el-container class="home_comtainer">
        <el-header>
            <div>
                <img src="../assets/logo.png" width="40" height="40">
                <span>  ECNU硕士学位申请系统学生端</span>
            </div>

            <div>
                {{username}}, welcome!
                <el-button type="danger" @click="quit">退出</el-button>
            </div>

        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        isCollapse=false
                        default-active="2"
                        class="el-menu-vertical-demo"
                        :router="true"
                        :unique-open="true"
                        background-color="#EBEBEB"
                        text-color="#333"
                        active-text-color="#ffd04b"
                >
                    <el-submenu index="1">
                        <!--              关于如何动态请求菜单栏 详细见视频https://www.bilibili.com/video/BV1zy4y147iX?p=8&spm_id_from=pageDriver&vd_source=45487a14f98fd4853eb3c58482c9185d ，4min左右-->
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>硕士学位论文申请系统</span>
                        </template>

                        <el-menu-item index="/welcome">欢迎页面</el-menu-item>
                        <el-menu-item index="/user">我的信息</el-menu-item>
                        <el-menu-item index="/transcript">我的成绩</el-menu-item>
                        <el-menu-item index="/scientificresearchresults">我的科研成果</el-menu-item>
                        <el-menu-item index="/prereview">论文预审</el-menu-item>
                        <el-menu-item index="/dobleblindreview">双盲评审</el-menu-item>
                        <el-menu-item index="/reviewrequest">答辩评阅申请</el-menu-item>
                        <el-menu-item index="/overallblindreview">评阅盲审总评</el-menu-item>
                        <el-menu-item index="/replyresults">答辩结果</el-menu-item>
                        <el-menu-item index="/degreeapply">学位申请</el-menu-item>



                    </el-submenu>
                </el-menu>


            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>

<script>
    export default {
        data() {
            return {
                username: ""
            }
        },
        methods: {
            quit() {
                this.$router.push('/')
            }
        },
        mounted() {
            this.username = localStorage.getItem('username')
        }
    }
</script>

<style scoped="scoped">
.home_comtainer {
    height: 100%;
}

.el-header {
    background-color: #EBEBEB;
    color: #333;
    text-align: center;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
}

.el-header img {
    vertical-align: middle;
}

.el-aside {
    background-color: #EBEBEB;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    /*background-color: #E9EEF3;*/
    color: #333;
    text-align: center;
    line-height: 160px;
}

/*  body > .el-container {*/
/*    margin-bottom: 40px;*/
/*  }*/

/*  .el-container:nth-child(5) .el-aside,*/
/*  .el-container:nth-child(6) .el-aside {*/
/*    line-height: 260px;*/
/*  }*/

/*  .el-container:nth-child(7) .el-aside {*/
/*    line-height: 320px;*/
/*}*/

</style>